<template>
  <div>
    <van-nav-bar class="page-nav-bar" title="登录" />
    <van-form @submit="onSubmit">
      <van-field v-model="user.mobile" name="手机号" placeholder="请输入手机号">
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>
      <van-field v-model="user.code" type="phone" name="验证码" placeholder="请输入验证码">
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-button class="btn-send-vcode" size="small" round
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button block type="info" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import axios from "axios";

import { login } from '@/api'

export default {
  data() {
    return  {
      user: {
        mobile: '',
        code: ''
      }
    }
  },
  async created() {
    // try-catch: 处理运行时异常
    // 1. 在 try 代码块中的代码报错不会影响后面代码的执行
    // 2. 在 try 代码块中的报错信息, 会被传递到 catch 的 err 对象中
    // 3. try-catch 只能用于同步代码, 无法捕获异步的异常
    // 4. async/await 可以结合 try-catch 使用
    // try {
    //   let res = await axios({
    //     url: "http://ttapi.research.itcast.cn/app/v1_0/authorizations",
    //     method: "POST",
    //     data: {
    //       mobile: "13911122221",
    //       code: "22222",
    //     },
    //   });

    //   console.log('登录成功', res)

      // let obj = {}
      // console.log(obj.name.indexOf('abc'))
      // axios({
      //   url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
      //   method: 'POST',
      //   data: {
      //     mobile: '13911122221',
      //     code: '22222'
      //   }
      // }).then(res => {
      //   console.log(res)
      // })
      // err => {

      // }).catch(err => {

      // })
    // } catch (err) {
    //   console.log('try-catch 捕获的异常', err);
    //   console.dir(err)

    //   if (err.response.status === 400) {
    //     // 用户名或密码错误
    //   }
    // }

    // console.log("这时后面的事情");
  },
  methods: {
    async onSubmit() {
      // console.log("submit", this.user);
      try {
        let res = await login(this.user)
        console.log(res) 
      } catch(err) {
        console.dir(err)
      }
    },
  },
};
</script>

<style scoped lang="less">
.toutiao {
  font-size: 37px;
}

.btn-send-vcode {
  width: 158px;
  height: 46px;
  line-height: 46px;
  background-color: #ededed;
  font-size: 22px;
  color: #666;
}
.login-btn-wrap {
  padding: 53px 33px;
  .login-btn {
    background-color: #6db4fb;
    border: none;
  }
}
</style>